<template>
  <t-tooltip v-if="isOverflow" :content="text" placement="top">
    <span ref="spanRef" :class="className" :style="style">{{ text }}</span>
  </t-tooltip>
  <span v-else ref="spanRef" :class="className" :style="style">{{ text }}</span>
</template>

<script setup>
import { ref, onMounted, watch, nextTick } from 'vue';

const props = defineProps({
  text: String,
  className: String,
  style: [String, Object]
});

const isOverflow = ref(false);
const spanRef = ref(null);

function checkOverflow() {
  nextTick(() => {
    if (spanRef.value) {
      isOverflow.value = spanRef.value.scrollWidth > spanRef.value.clientWidth;
    }
  });
}

onMounted(checkOverflow);
watch(() => props.text, checkOverflow);
</script> 